<template>
  <div class="">
    <div class="row">
      <leftTypeList :navList="navList" label="name" param="url"></leftTypeList>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          name: "个人中心",
          url: "myHome",
          code: "",
        },
        {
          name: "个人资料",
          url: "myInfo",
          code: "",
        },
        {
          name: "购物车",
          url: "cart",
          code: "",
        },
        {
          name: "我的订单",
          url: "order",
          code: "",
        },
        {
          name: "我的收藏",
          url: "like",
          code: "",
        },
        {
          name: "卖书",
          url: "sellBooks",
          code: "",
        },
      ],
    };
  },
  computed: {
    roles: function () {
      return this.$store.state.user.user.roles;
    },
  },
  mounted() {
    console.log("personal mouted:roles=", this.roles);
    if (
      this.roles.indexOf("ROLE_ROOT") >= 0 ||
      this.roles.indexOf("ROLE_ADMIN") >= 0
    ) {
      this.navList.push({
        name: "注册管理员",
        url: "registerAdmin",
        code: "",
      });
      this.navList.push({
        name: "公告管理",
        url: "tv",
        code: "",
      });
    } else {
      if (this.navList.lastIndexOf(0).name == "注册管理员") {
        this.navList = this.navList.slice(0, this.navList.length - 1);
      }
    }
  },
  components: {
    leftTypeList: () => import("@/components/base/leftTypeList.vue"),
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-left: 20px;
  margin-top: 10px;
  width: calc(100% - 180px);
}
</style>